<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霓虹灯滚动条</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>

    <div class="scrollPath">
        <div class="progerss"></div>
        <div class="progerssbar"></div>
    </div>
    <script>
        let progress = document.querySelector('.progerss');
        let progerssbar = document.querySelector('.progerssbar');
        progerssbar.onmousedown = (e)=>{
            let downX = e.pageX;
            let downL = progerssbar.offsetLeft;
            console.log(1);
            document.onmousemove = function(e){
                let scale = (e.pageX - downX + downL) / progerssbar.parentNode.offsetWidth;
                if(scale<0){
                    scale  = 0;
                }else if(scale>1){
                    scale = 1;
                }
                progerssbar.style.left = scale * 100 + '%';
                progress.style.width = scale * 100 + '%'
            }
            
        }
        document.onmouseup = ()=>{
            document.onmousemove = null;
        }
       
       
    </script>
</body>
</html>